<template>
  <el-row>
    <el-col :span="24" style="display: none; margin-bottom: 20px;">
      <el-card>
        <div class="user">
          <div class="flex items-center">
            <img class="mr-3.5" :src="userInfo.avatar" />
            <div>
              <div>Hi，{{ userInfo.username }}</div>
              <div class="regular"></div>
            </div>
          </div>
          <img src="@/assets/assets-tencent-logo.png" class="logo" />
        </div>
      </el-card>
    </el-col>
    <el-col :span="24" style="margin-bottom: 20px;">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>我的监控</span>
          </div>
        </template>
        <div class="add-content" style="">
          <h3>监控卖家</h3>
          <div class="input-content">
            <el-input size="large" autocomplete="off" v-model.trim="sellerUrl" placeholder="请输入卖家url" style="width: 40%" />
            <div style="width: 15px"></div>
            <el-button size="large" type="primary" :loading="state.monitorSubmitLoading" @click="onMonitorSellerUrl">添加监控</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="24">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>收藏的产品</span>
          </div>
        </template>
        <pre-submit-listing :height="'calc(100vh - 455px)'" />
      </el-card>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import { user } from '@/plugins/store/user'
import { monitorSeller } from '@/api/common'
import { ElMessage } from 'element-plus'
import PreSubmitListing from '@/views/user/listing/preSubmitListing.vue'
const userInfo = user().getUserInfo()
const sellerUrl = ref('')
const state = reactive({
  monitorSubmitLoading: false,
})

const onMonitorSellerUrl = () => {
  if (sellerUrl.value) {
    state.monitorSubmitLoading = true
    monitorSeller({ sellerUrl: sellerUrl.value, bsType: 'seller' })
      .then((res) => {
        if (res.code === 'success') {
          sellerUrl.value = ''
          ElMessage.success('添加成功')
        }
      })
      .finally(() => {
        state.monitorSubmitLoading = false
      })
  } else {
    ElMessage.error('请输入卖家 Url')
  }
}
</script>
<style scoped lang="scss">
.user {
  padding: 28px 32px;
  line-height: 28px;
  font-size: 20px;
  background: #fff;
  color: rgba(0, 0, 0, 90%);
  text-align: left;
  border-radius: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .regular {
    margin-right: 15px;
    font-size: 14px;
  }

  .logo {
    width: 180px;
  }
}

.pad {
  margin-top: 24px;
  display: grid;
  grid-gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  width: 100%;
  .bar {
    height: 82px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px 0 24px;
    box-sizing: border-box;
    background: #fff6eb;
    // transition: all 0.4 sease-in-out;
  }
  .bar {
    background: #fff6eb;
  }
  .iconpark-icon {
    font-size: 32px;
    stroke: none;
  }
  .bar-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .bar-text {
    color: #000000;
    font-size: 16px;
    margin-left: 10px;
    line-height: 1.5;
  }
  .arrow {
    color: #191919;
    font-size: 28px;
  }
}
.add-content {
  margin-bottom: 40px;
}
.input-content {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 26px;
}
.add-content h3 {
  font-size: 20px;
  font-weight: bold;
  color: #191919;
  line-height: 25px;
  text-align: center;
}
.add-content .input-content {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 26px;
}
</style>
